import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import ListTable from 'components/ListTable'
import getProjectTeams from 'graphql/project/user/teamList.graphql'
import getProjectTeamsPageInfo from 'graphql/project/user/teamPageInfo.graphql'
import deleteProjectTeam from 'graphql/project/user/deleteProjectTeam.graphql'
import Icons from 'utils/constents/icons'
import { listTable as listTableDuck } from 'ducks'

const FileList = actionInit => ({ data }) => {
  const makeOpt = id => [
    {
      src: Icons.DELETE,
      text: '删除',
      action: () => actionInit({
        graphqlAction: deleteProjectTeam,
        submitValues: { id },
        icon: 'trash alternate',
        title: ' 删除项目子组织',
        message: '请注意：删除项目子组织会回收对应的所有任务',
      }),
    },
  ]
  return (
    <React.Fragment>
      {data.project_team.map(member => (
        <ListTable.Row>
          <ListTable.Cell>{member.team_object.name}</ListTable.Cell>
          <ListTable.Time>{member.create_at}</ListTable.Time>
          <ListTable.Action width={2} options={makeOpt(member.id)} />
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { match, project, actionOpen } = this.props
    const { projectId } = project
    const newTeamUrl = `/project/${project.orgName}/${project.projectName}/user/team/new`
    const globalActions = [
      {
        text: '添加组织',
        url: newTeamUrl,
      },
    ]
    const RenderList = FileList(actionOpen)
    return (
      <ListTable
        globalActions={globalActions}
        search={{ text: '搜索成员' }}
        pagination={{
          query: getProjectTeamsPageInfo,
          name: 'project_team_aggregate',
          variables: {
            projectId,
          },
        }}
        listData={{
          query: getProjectTeams,
          variables: {
            projectId,
            limit: 10,
          },
          header: (
            <ListTable.Header>
              <ListTable.HeaderCell>名称</ListTable.HeaderCell>
              <ListTable.HeaderCell>添加时间</ListTable.HeaderCell>
              <ListTable.HeaderCell></ListTable.HeaderCell>
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '没有组织成员',
          action: {
            text: '添加组织成员',
            url: newTeamUrl,
          },
        }}
      />
    )
  }
}

const mapDispatchToProps = {
  link: path => push(path),
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  null,
  mapDispatchToProps,
)(DatasetData)
